<template>
	<footer :style= "{ width : $store.state.isMobile ? '100%' : '400px'}">
		<div class="comment-box">
			<div :class="[ykCoverClass]" @click.stop="ykCover" v-if="isYk"></div>
			<div class="input-big-box">
				<textarea id="textarea" ref="footerInputRu" v-model="inputValue" type="text" @focus="inputFocus"
					:placeholder="footerPlaceholder" @blur="blurRu"></textarea>
				<p :class="sendClass" :style="widthNum" @click="sendMsg">发送</p>
			</div>
			<div class="send-gift-wrap" v-show="giftIconOpen && isIconShow" @click="openGiftPanelHandle"></div>
			<div v-show="isIconShow" class="zan-box" @click="sendZan" id="zanTeXiao" ref="zanTeXiao">
				<!-- <img src="../../../../assets/images/lookBack/zan_l.png" :class="zanBoxImg" /> -->
				<ClickLike :roomInfo="roomInfo" ref="clickLike"></ClickLike>
			</div>
		</div>
	</footer>
</template>

<script>
	import ClickLike from '@/components/ClickLike/ClickLike';
	export default {
		components:{
			ClickLike
		},
		props: {
			roomInfo: Object,
			isPublic: Boolean, //直播间是否是公开不限制
			quickMessage: String,
		},
		data() {
			return {
				zanBoxImg: '', //点赞效果
				timer: null, //防抖定时器
				roomId: this.$route.params.roomid, //房间id
				footerPlaceholder: "说点什么吧...",
				isSend: false,
				inputValue: '', //输入框输入内容
				liveType: '', //房间状态 roomStatus  0  1  2  对应 1  2  16
				giftIconOpen: false, //礼物开关
				ykCoverClass: '', //游客覆盖层的长度
				sendZanSwitch: true, //点赞开关
				isIconShow: true, //是否展示输入框右侧图标
				sendClass: '', //发送按钮样式
				isSocketConnected: false, //socket是否连上
				isSocketConnectedSecondSwitch: true, //点赞开关
				isYk: false,
				widthNum: {
					width: "3rem"
				}
			}
		},
		watch: {
			// 监听快捷消息变动改变输入框的值
			quickMessage() {
				this.inputValue = this.quickMessage;
			},
			//监听底部按钮颜色变化
			inputValue() {
				if (this.inputValue) {
					this.sendClass = 'send-red'
				} else {
					this.sendClass = ''
				}
			},
		},
		created() {
			if (this.$store.state.isYk) {
				this.isYk = true;
			}
			// isPl  是否允许评论 0 否 1是     plCk 评论审核 0 先发 1 先审后发
			if (this.roomInfo.roomInfo.isPl == '0') { //评论关闭
				this.footerPlaceholder = '评论功能已关闭';
			} else if (this.roomInfo.roomInfo.isPl == '1') { //可以评论

			}
			if (this.roomInfo.roomInfo.roomStatus == '0') { //预告
				this.liveType = '1'
			} else if (this.roomInfo.roomInfo.roomStatus == '1') { //直播
				this.liveType = '2'
			} else if (this.roomInfo.roomInfo.roomStatus == '2') { //关播
				this.liveType = '16'
			};
			if (this.roomInfo.roomInfo.giftOpen == 1) {
				this.giftIconOpen = true;
				this.ykCoverClass = 'yk-cover';
			} else {
				this.ykCoverClass = 'yk-cover-no-gift';
				this.giftIconOpen = false
			}

		},
		mounted() {
			fun.objBlurFun('textarea'); //ios下键盘弹出点击空白不收起问题
		},
		methods: {
			debounce() { //防抖动画执行
				let _this = this
				return function() {
					if (_this.timer) {
						clearTimeout(_this.timer);
						_this.timer = setTimeout(() => {
							_this.$addStorageEvent(2, 'hunayuan', 0); //判断动画是否改变
						}, 2000);
					} else {
						_this.timer = setTimeout(() => {
							_this.$addStorageEvent(2, 'hunayuan', 0); //判断动画是否改变
						}, 2000);
					}
				}()
			},
			inputFocus() { //获取焦点
				setTimeout(() => {
					this.isIconShow = false;
					this.widthNum.width = '4.5rem'
				}, 100)
			},
			//input 失去焦点  解决ios 最新版本6.7.4 input BUG
			blurRu() {
				setTimeout(() => {
					//window.scrollTo(0, 0)
					this.isIconShow = true;
					this.widthNum.width = '3rem'
				}, 100)
			},

			ykCover() {
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid)
					fun.ykDisposeFun(jointUrl)
					return
				}
			},
			// 直播提交留言
			sendMsg() {
				// 神策打点（发言）
				const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `直播${['预告', '详情'][roomStatus]}页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: roomId,
					live_room_name: title,
					live_room_status: ['预告', '直播中'][roomStatus],
					live_room_creator: anchor,
					function_name: '发送留言',
					reply_content: this.inputValue
				});
				this.$parent.quickMessage = "";
				if (this.roomInfo.roomInfo.isPl == '0') { //评论关闭
					fun.toastMessage("评论功能已关闭", 2000);
					this.inputValue = '';
					return;
				}
				if (this.inputValue.length > 150) {
					fun.toastMessage("留言字数过多，请重新编辑", 2000)
					return
				}
				this.sendDatabaseMsg()
			},
			sendDatabaseMsg() { //消息入库 在im回调之后
				let tmpMsg = this.inputValue;
				let params = {
					'type': '0',
					'liveType': this.liveType,
					'anchor': this.roomInfo.roomInfo.anchor,
					'message': tmpMsg,
					'plat': fun.getPlatform(),
					'sceneId': this.roomInfo.roomInfo.sid,
					'roomId': this.roomInfo.roomInfo.roomId
				};
				if (tmpMsg != "") {
					this.$http.post("/h5live/speakSend", this.$qs.stringify(params)).then(
						res => {
							if (res.data.code == "000000") {
								if (this.roomInfo.roomInfo.plCk == "1") { //plCk 评论审核 0 先发 1 先审后发
									fun.toastMessage("已提交，等待审核", 2000)
								}
								/*else {
									this.$emit('formChildMsg',{//im消息
										type:'sendImNotice',
														data:{
															'tmpMsg':tmpMsg
														}
										})
								}*/
							} else if (res.data.code == "100003") {
								fun.toastMessage("您已被禁言", 2500)
							} else if (res.data.code == "100008") {
								fun.toastMessage("发言过于频繁，请稍后再发言！", 2500)
							} else {
								fun.toastMessage(res.data.msg, 2500)
							}
						},
						err => {
							console.log(err);
						}
					);
				}
				this.inputValue = ''
			},
			// 送礼物
			openGiftPanelHandle() {
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid)
					fun.ykDisposeFun(jointUrl)
					return
				}
				this.$store.dispatch("showGiftPanelFlag", true)
				this.$store.dispatch("showSendMask", true)
			},
			// 点赞
			sendZan(e) {
				const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `直播${['预告', '详情'][roomStatus]}页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: roomId,
					live_room_name: title,
					live_room_status: ['预告', '直播中'][roomStatus],
					live_room_creator: anchor,
					function_name: '点赞',
				});
				if (e.target.classList.contains("icon-wrap")) return false;
				// 触发动画
				this.$refs.clickLike.triggerAni();
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
					fun.ykDisposeFun(jointUrl)
					return
				} else {
					this.sendZanFun();
				}
    		},
			sendZanFun() {
				this.$refs.clickLike.triggerNum();
			},

				ykCover() {
				if (this.$channel = 'gszq' && this.isPublic) {
					this.$emit('formChildMsg', {
					type: 'isPublicShow',
					data: {
						'Msg': '公开不限制直播间'
					}
					})
					return
				}
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
					fun.ykDisposeFun(jointUrl)
					return
				}
			},
			debounce() { //防抖动画执行
				let _this = this
				return function() {
					if (_this.timer) {
						clearTimeout(_this.timer);
						_this.timer = setTimeout(() => {
							_this.$addStorageEvent(2, 'hunayuan', 0); //判断动画是否改变
						}, 2000);
					} else {
						_this.timer = setTimeout(() => {
							_this.$addStorageEvent(2, 'hunayuan', 0); //判断动画是否改变
						}, 2000);
					}
				}()
			},
		},
	}
</script>

<style scoped="scoped">
	.yk-cover {
		width: 580px;
		height: 100px;
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		/*background: pink;*/
	}

	.yk-cover-no-gift {
		width: 635px;
		height: 100px;
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		/* background: darkcyan;*/
		z-index: 100;
	}

	footer {
		width: 100%;
		background: white;
		border-top: 1px solid #e2e2e2;
		position: fixed;
		bottom: 0;
		z-index: 100;

		/* height: calc(100px + constant(safe-area-inset-bottom));
		height: calc(100px + env(safe-area-inset-bottom));
		padding-bottom: calc(constant(safe-area-inset-bottom));
        padding-bottom: calc(env(safe-area-inset-bottom));  */
	}

	.comment-box {
		width: 100%;
		height: 100px;
		/* display: flex;
		justify-content: center; */
		/* align-items: center; */
		/* padding-top: 6px; */
		display: flex;
		justify-content: center;
		align-items: center;
		/* background: salmon; */
	}

	.input-big-box {
		flex: 1;
		height: 78px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(246, 246, 246, 1);
		border-radius: 23px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.comment-box textarea {
		height: 78px;
		font-size: 30px;
		background: rgba(246, 246, 246, 1);
		border-radius: 23px 0 0 23px;
		border-top: none;
		border-bottom: none;
		outline: none;
		border-right: 2px solid rgba(241, 241, 241, 1);
		padding-left: 25px;
		padding-top: 20px;
		line-height: 40px;
		flex: 1;
	}

	textarea::placeholder {
		color: #C4C4C4;
	}

	.input-big-box p {
		width: 90px;
		height: 100%;
		border-radius: 0 23px 23px 0;
		display: inline-block;
		text-align: center;
		font-size: 28px;
		line-height: 78px;
		color: #333333;
	}

	.input-big-box .send-red {
		color: #cc3538;
	}

	.input-big-box .send-purple {
		color: #8E12BE;
	}

	.send-gift-wrap {
		width: 60px;
		height: 60px;
		background: url('../../../../assets/images/lookBack/gift-icon_l.png');
		background-size: 100% 100%;
		margin-right: 20px;
		margin-top: 6px;
	}

	.zan-box {
		width: 60px;
		height: 60px;
		text-align: center;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20px;
		margin-top: 6px;
	}

	.zan-box img {
		width: 60px;
		height: 60px;
		user-select:none;
  		-webkit-user-select: none;
  		-moz-user-select: none;
		pointer-events: none;
	}

	/* 点赞效果q弹 */
	.zanBoxImg {
		animation: keyNavBottom 0.3s ease-in;
	}

	@keyframes keyNavBottom {
		0% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.1);
		}

		50% {
			transform: scale(0.9);
		}

		75% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
